<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-12-12 10:32:14
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
div.my-refund-offline.relative.h100
  div.container.overflow-y.mt4.px4
    el-form(
      ref="formRef"
      :model="form"
      :size="formSize"
      status-icon)
      el-row(:gutter="40")
        el-col(:span="6")
          el-form-item(label="订单ID" prop="id")
            el-input(v-model="form.id" placeholder="请输入" clearable)
        el-col(:span="6")
          el-form-item(label="订单编号" prop="order_no")
            el-input(v-model="form.order_no" placeholder="请输入" clearable)
        el-col(:span="6")
          el-form-item(label="标的名称" prop="goods_spec_name")
            el-input(v-model="form.goods_spec_name" placeholder="请输入" clearable)
        el-col(:span="6")
          el-form-item(label="行业类目" prop="category_id")
            el-select(
              v-model="form.category_id",
              placeholder="请选择",
              clearable,
              @change="categoryChange"
            )
              el-option(
                v-for="item in categoryList",
                :key="item.id",
                :label="item.name",
                :value="item.id"
              )
        el-col(:span="6")
          el-form-item(label="易出企业" prop="seller_company_id")
            el-select(
              v-model="form.seller_company_id",
              placeholder="请选择",
              clearable,
              @change="companyChange"
            )
              el-option(
                v-for="item in sourceCompanyList",
                :key="item.id",
                :label="item.name",
                :value="item.id"
              )
        el-col(:span="6")
          el-form-item(label="联系电话", prop="mobile")
            el-input(v-model="form.mobile", placeholder="请输入", clearable)
        el-col(:span="6")
          el-form-item(label="订单状态" prop="status")
            el-select(
              v-model="form.status",
              placeholder="请选择",
              clearable,
              @change="offlineListChange"
            )
              el-option(
                v-for="item in offlineList",
                :key="item.value",
                :label="item.name",
                :value="item.value"
              )
        el-col(:span="6")
          el-form-item(label="创建时间" prop="start_create_time")
            el-date-picker(
              v-model="form.start_create_time",
              type="date",
              format="YYYY-MM-DD",
              value-format="YYYY-MM-DD",
              placeholder="选择时间",
              @change="createChangeTime",
              :size="size"
              )
        el-col(:span="6")
          el-form-item(label="支付时间" prop="start_pay_time")
            el-date-picker(
              v-model="form.start_pay_time",
              type="date",
              format="YYYY-MM-DD",
              value-format="YYYY-MM-DD",
              placeholder="选择时间",
              @change="payChangeTime",
              :size="size"
              )
        el-col(:span="6")
          el-form-item(label="发货时间" prop="start_delivery_time")
            el-date-picker(
              v-model="form.start_delivery_time",
              type="date",
              format="YYYY-MM-DD",
              value-format="YYYY-MM-DD",
              placeholder="选择时间",
              @change="deliveryChangeTime",
              :size="size"
              )
        el-col(:span="6")
          el-form-item(label="收货时间", prop="start_confirm_time")
            el-date-picker(
              v-model="form.start_confirm_time",
              type="date",
              format="YYYY-MM-DD",
              value-format="YYYY-MM-DD",
              placeholder="选择时间",
              @change="confirmChangeTime",
              :size="size"
            )      
        el-col(:span="6")
          div.flex.justify-end
            el-button(type="primary" @click="onQueryChange") 查询
            el-button(@click="onQueryReset(formRef)") 重置
    div.table
      el-table(
        :data="tableData" 
        :header-cell-style="tableHeaderStyle"
        :cell-style="tableCellStyle"
        empty-text="暂无数据"
        border 
        style="width: 100%")
        el-table-column(prop="id" label="订单ID" width="74")
        el-table-column(prop="order_no" label="订单编号" width="150")
        el-table-column(prop="goods_spec_name" label="标的名称" width="144")
          template(v-slot="scope")
            div(v-for="(item, index) in scope.row.goods_list", :key="index") {{ item.goods_spec_name }}
        el-table-column(prop="goods_spec_image" label="标的图片" width="150")
          template(v-slot="scope")
            el-image(
              v-for="(item, index) in scope.row.goods_list",
              :src="item.goods_spec_image"
              :zoom-rate="1.2"
              :preview-src-list="formatImage(scope.row.goods_list)"
              :initial-index="index"
              :preview-teleported="true"
              fit="cover")
        el-table-column(prop="markInfo" label="标的信息" width="260")
          template(v-slot="scope")
            div 行业类目：{{ scope.row.category ? scope.row.category : "" }}
            div 易出企业：{{ scope.row.company ? scope.row.company : "" }}
            div 联系电话：{{ scope.row.mobile ? scope.row.mobile : "" }}
        el-table-column(prop="money" label="易定金额" width="90")
        el-table-column(prop="available_money" label="可用金额" width="90")
        el-table-column(prop="method" label="担保费" width="90")
          template(v-slot="scope")
            div {{ scope.row.method ? scope.row.method : "" }} 
        el-table-column(prop="refund_status" label="审核状态" width="90")
          template(v-slot="scope")
            div(:class="initStatusColor(scope.row.refund_status)") {{ initStatusText(scope.row.refund_status) }} 
        el-table-column(prop="review_time" label="审核时间" width="117")
        el-table-column(prop="reviewer" label="审核人" width="90")
        el-table-column(prop="review_reason" label="驳回理由" width="90")
          template(v-slot="scope")
            div {{ scope.row.review_reason ? scope.row.review_reason : "" }} 
        el-table-column(prop="refund_time" label="发起时间" width="117")
          template(v-slot="scope")
            div {{ scope.row.refund_time ? scope.row.refund_time : "--" }} 
        el-table-column(fixed="right" label="操作" width="140")
          template(v-slot="scope" #default)
            el-button.refund(link type="primary" size="small" @click="onLook(scope.row)") 查看
  //- 分页
  TablePagination(
    v-if="totalList > 0",
    :totalList="totalList",
    :page="form.page",
    @handleCurrentChange="handleCurrentChange")
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import TablePagination from "@/components/TablePagination.vue";
import { useRouter } from "vue-router";
import { Category, OrderParams } from "@/api/common";
import { CompanyAll } from "@/api/barterhall";
import { OrderBuyerList } from "@/api/easymain";
const router = useRouter();
const { proxy } = getCurrentInstance();
const tabList = ref(["线上", "线下"]);
const formRef = ref();

// 生命周期
onMounted(() => {
  getCategory();
  getCompanyAll();
  getOrderParams();
  getOrderBuyerList();
});
//获取退款列表
const getOrderBuyerList = () => {
  OrderBuyerList(form.value)
    .then((res) => {
      if (res.code == 1) {
        tableData.value = res.data.data;
        totalList.value = res.data.total;
      }
    })
    .catch((err) => {});
};

//行业类目
const categoryList = ref([]);
//获取行业类目
const getCategory = () => {
  Category().then((res) => {
    categoryList.value = res.data;
  });
};
//行业类目切换
const categoryChange = (val) => {
  console.log("val", val);
  form.value.category_id = val;
};

//易出企业
const sourceCompanyList = ref([]);
//获取所有企业
const getCompanyAll = () => {
  CompanyAll()
    .then((res) => {
      if (res.code == 1) {
        sourceCompanyList.value = res.data;
      }
    })
    .catch((err) => {});
};
//易出企业切换
const companyChange = (val) => {
  form.value.buyer_company_id = val;
  console.log("val", val);
};

const form = ref({
  type: 2,
  id: "",
  order_no: "",
  goods_spec_name: "", 
  category_id: "",
  seller_company_id: "",
  mobile:"",
  status: "",
  start_create_time: "", //开始创建时间
  end_create_time: "", //截止创建时间
  start_pay_time: "", //开始支付时间
  end_pay_time: "", //截止支付时间
  start_delivery_time: "", //开始发货时间
  end_delivery_time: "", //截止发货时间
  start_confirm_time: "", //开始收货时间
  end_confirme_time: "", //截止收货时间
  page: 1,
  page_size: 10,
});
const tableHeaderStyle = ref({
  backgroundColor: "#E5E6EB",
  color: "#000000",
  textAlign: "center",
});
const tableCellStyle = ref({
  textAlign: "center",
});
const tableData = ref([]);
const rowId = ref("");

//获取线上线下订单状态
const getOrderParams = () => {
  OrderParams()
    .then((res) => {
      // onlineList.value = res.data.online_status.list;
      offlineList.value = res.data.offline_status.list;
    })
    .catch((err) => {});
};
//订单状态
const offlineList = ref([]); //线上
// 订单状态切换
const offlineListChange = (val) => {
  form.value.status = val;
  console.log("val", val);
};

//创建时间
const createChangeTime = (val) => {
  form.value.start_create_time = val;
  form.value.end_create_time = val;
  console.log("开始创建时间", val);
};

//支付时间
const payChangeTime = (val) => {
  form.value.start_pay_time = val;
  form.value.end_pay_time = val;
};

//发货时间
const deliveryChangeTime = (val) => {
  form.value.start_delivery_time = val;
  form.value.end_delivery_time = val;
};
//收货时间
const confirmChangeTime = (val) => {
  form.value.start_confirm_time = val;
  form.value.end_confirme_time = val;
};

// 状态颜色和文本
const initStatusColor = (status) => {
  return status == 10 ? "" : status == 20 ? "overdue" : "refund";
};
const initStatusText = (status) => {
  return status == 10 ? "待审核" : status == 20 ? "通过" : "驳回";
};
//查看订单
const onLook = (row) => {
  // type==1 线上 type==2 线下
    router.push({
      path: "/order-detail-offline",
      query: {
        id: row.id,
        type: 2,
      },
    });
};

// 查询
const onQueryChange = () => {
  console.log('form',form.value);
  getOrderBuyerList();
  proxy.$message.success("查询成功");
};
// 重置
const onQueryReset = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  getOrderBuyerList();
};
// 预览图片列表
const formatImage = (list) => {
  const imageArr = [];
  list.forEach((item, index) => {
    imageArr.push(item.goods_spec_image);
  });
  return imageArr;
};
// 数据总条数
const totalList = ref(0);
const handleCurrentChange = (val) => {
  form.value.page = val;
  getOrderBuyerList();
};
</script>

<style lang="stylus" scoped>
.img-size {
  width: 100px;
  height: 58px;
  border-radius: 10px 10px 10px 10px;
}
.my-refund-offline
  .container {
    height: calc(100vh - 304px);
  }
  .overdue
    color: #E84026 !important;
  .refund
    color:  #2487E8;
  .black
    color: #606266;
  .no-quota
    margin-top: 200px;
</style>
  